<template>
  <Main>
    <template #main-action>
      <div>
        <el-button size="large" :icon="Plus" color="#000000" @click="openWindow(1)">{{ addDishesCate }}</el-button>
        <el-button size="large" :icon="Plus" color="#ffc200" @click="openWindow(2)">{{ addPackageCate }}</el-button>
      </div>
    </template>
    <template #table>
      <GTable :columns="columns" :loading="loading" :total="total" :data="tableData" @sizeChange="sizeChange" @currentChange="currentChange" @prevClick="prevClick" @nextClick="nextClick">
        <template #updateTime="{ row }">
          <span v-if="row.updateTime">{{ row.updateTime.split('T')[0] + ' ' + row.updateTime.split('T')[1] }}</span>
        </template>
        <template #type="{ row }">
          <el-tag v-if="row.type === 1"  class="ml-2" type="info">{{ addDishesCate.slice(2) }}</el-tag>
          <el-tag v-else class="ml-2" type="warning">{{ addPackageCate.slice(2) }}</el-tag>
        </template>
        <template #general="{ row }">
          <el-button size="small" round type="primary" @click="openEditWindow(row)">修改</el-button>
          <el-button size="small" round type="danger" @click="deleteCateOne(row)">删除</el-button>
        </template>
      </GTable>
    </template>
  </Main>
  <Window @closeWin="closeWin" @cateSubMit="cateSubMit" :page="page" :windowHeight="'35%'" :isShowWindow="isShowWindow" :winTitle="winTitle" >
    <template #form>
      <Form :formProps="formProps" :isShowBtns="false" />
    </template>
  </Window>
</template>

<script setup>
import { useCategoryData } from './useCategoryData.js'
import Window from '/src/components/window.vue'
import Form from '/src/components/form.vue'
import { Plus } from '@element-plus/icons-vue'
import {ref} from "vue";
const  addDishesCate = ref('新增菜品分类')
const  addPackageCate = ref('新增套餐分类')
const { formProps,columns,tableData,sizeChange,currentChange,prevClick,nextClick,winTitle,
  type,
  page,
  isShowWindow, openEditWindow,total,cateSubMit,deleteCateOne, loading } = useCategoryData()


function openWindow (flag) {
  page.value = 'add'
  type.value = flag
  isShowWindow.value = true
  flag === 1 ? winTitle.value = addDishesCate.value : winTitle.value =  addPackageCate.value
  for (let key in formProps.model) {
    formProps.model[key] = null
  }
}
function closeWin () {
  isShowWindow.value = false
}
</script>

<style scoped>

</style>
